<template>
	<uni-transition mode-class="fade" :duration="0" :show="$store.state.tabbar">
		<cover-view class="tabbar">
			<cover-view class="tabbarBox">
				<cover-view class="handleBox" v-for="(item, index) in tabbarList" :key="`${pageIndex}_${index}_${item.text}`">
					<cover-view class="menuBox" @click="goPages(item)">
						<cover-view class="menuIcon">
							<cover-view v-if="index === 2 && dotNum > 0" class="dot">{{ dotNum }}</cover-view>
							<cover-image v-if="item.pagePath === selectPath" class="icon" :src="item.selectedIconPath">
							</cover-image>
							<cover-image v-else class="icon" :src="item.iconPath"></cover-image>
						</cover-view>
						<cover-view class="menuName">
							<cover-view v-if="item.pagePath === selectPath" class="menuTxt selTxt">{{ item.text }}</cover-view>
							<cover-view v-else class="menuTxt">{{ item.text }}</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</uni-transition>
</template>

<script>
	import moment from 'moment';
	export default {
		props: {
			pageIndex: {
				type: String,
				default: '0'
			}
		},
		watch: {
			pageIndex: {
				handler(value) {
					const routes = getCurrentPages();
					this.selectPath = `/${routes[routes.length - 1].route}`;
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				selectPath: '/pages/home/index/index',
				tabbarList: '',
				dotNum: 0,
				dotRecord: '' // 节流标记
			};
		},
		// uniapp子组件不支持应用生命周期，所以只能用vue生命周期
		created() {
			console.log('tabbar created');
			// tabbar数据，这儿也支持后台定义通过接口获取数据
			if (this.$store.state.login.token) {
				this.tabbarList = [{
						pagePath: '/pages/home/index/index',
						iconPath: '../../static/tabbar/home_nor.png',
						selectedIconPath: '../../static/tabbar/home_sel.png',
						text: '首页'
					},
					{
						pagePath: '/pages/cart/index/index',
						iconPath: '../../static/tabbar/cart_nor.png',
						selectedIconPath: '../../static/tabbar/cart_sel.png',
						text: '购物车'
					},
					{
						pagePath: '/pages/mine/index/index',
						iconPath: '../../static/tabbar/mine_nor.png',
						selectedIconPath: '../../static/tabbar/mine_sel.png',
						text: '个人中心'
					}
				];
				this.$store.commit('showTabbar');
				//setTimeout(() => this.getDotNum(), 1000);
			}
		},
		methods: {
			async goPages(item) {
				uni.switchTab({
					url: item.pagePath
				});
				//await this.getDotNum();
			},
			async getDotNum() {
				const now = moment().format('YYYY-MM-DD HH:mm:ss');
				if (!this.dotRecord || moment(now).diff(moment(this.dotRecord), 'seconds') > 60) {
					const numRes = await this.$uniCloudCallFunction({
						name: 'xxf-order',
						action: 'getTabbarNum',
						data: {
							uid: this.$store.state.login.uid,
							role: this.$store.state.login.role
						}
					});
					console.log("numRes: ", numRes);
					this.dotNum = numRes || 0;
					this.dotRecord = now;
				}
			}
		}
	};
</script>
<style lang="scss">
	@import '@/uni.scss';

	.tabbar {
		width: 100vw;
		height: 136rpx;
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		box-shadow: 0 0 8rpx 0 #f4f4f4 inset;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;

		/* 模糊大小就是靠的blur这个函数中的数值大小 */
		// backdrop-filter: blur(10px);
		// border-radius: 60rpx;
		.tabbarBox {
			width: calc(100% - 10rpx);
			height: calc(100% - 10rpx);
			border-radius: 10rpx;
			display: flex;
			justify-content: space-evenly;

			.handleBox {
				width: 25%;
				height: 100%;

				.menuBox {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.menuIcon {
						padding: 20rpx 20rpx 10rpx;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: visible;

						.icon {
							width: 52rpx;
							height: 52rpx;
						}

						.dot {
							display: block;
							padding: 8rpx 10rpx;
							width: max-content;
							background: $xxf-red;
							border: 2rpx solid #fff;
							border-radius: 50%;
							font-weight: 400;
							font-size: 20rpx;
							color: #ffffff;
							position: absolute;
							top: 0;
							right: 0;
							z-index: 999;
						}
					}

					.menuName {
						width: 100%;
						text-align: center;

						.menuTxt {
							font-weight: 400;
							font-size: 28rpx;
							color: $uni-base-color;
						}

						.selTxt {
							color: $uni-primary;
							font-weight: bold;
						}
					}
				}
			}
		}
	}

	.Text {
		font-size: 24rpx;
		font-weight: 900;
	}

	.TextColor {
		@extend .Text;
		color: #ff6b00;
	}
</style>